{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/goods/tag.css?v={$static_version}" rel="stylesheet">
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1">
            <li class="inline-flex items-center">
                <a href="/" class="text-gray-500 hover:text-blue-500 text-sm">首页</a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                    <a href="/tag" class="text-gray-500 hover:text-blue-500 text-sm">商品标签</a>
                </div>
            </li>
            {if $current_tag}
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                    <span class="text-gray-500 text-sm">{$current_tag.name}</span>
                </div>
            </li>
            {/if}
        </ol>
    </nav>
    <!-- 货币符号标识 -->
    <span id="currency-symbol" class="hidden">{:conf('site_currency_symbol')}</span>
    <!-- 页面标题 -->
    <div class="mb-6">
        {if $current_tag}
        <h1 class="text-3xl font-bold text-gray-800 mb-2">
            {$current_tag.name}
        </h1>
        <p class="text-gray-500">共找到 {$total} 个相关商品</p>
        {else}
        <h1 class="text-3xl font-bold text-gray-800 mb-2">商品标签</h1>
        <p class="text-gray-500">选择标签查看相关商品</p>
        {/if}
    </div>

    <!-- 热门标签 -->
    <div class="bg-white rounded-sm p-4 mb-6 ">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">热门标签</h3>
        <div class="flex flex-wrap gap-2">
            <a href="/tag" class="filter-tag {if !$current_tag}active{/if}">
                全部标签
            </a>
            {if $tags}
            {volist name="tags" id="tag"}
            <a href="/tag/{$tag.id}" class="filter-tag {if $current_tag && $current_tag.id == $tag.id}active{/if}">
                {$tag.name}
            </a>
            {/volist}
            {/if}
        </div>
    </div>

    <!-- 结果统计 -->
    {if $current_tag}
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-500">
                共找到 {$total} 个商品
            </span>
        </div>
    </div>
    {/if}

    <!-- 商品列表容器 - 响应式布局 -->
    {if $goods_list}
    <div id="goods-container" class="grid grid-cols-1 md:grid-cols-5 gap-3 md:gap-6">
        {volist name="goods_list" id="goods"}
        <a href="{$goods.url}" class="block h-full group">
            <div
                class="bg-white rounded-sm overflow-hidden hover:border-blue-500 transition-colors h-full flex flex-row md:flex-col">
                <!-- 商品图片 -->
                <div
                    class="relative bg-gray-100 overflow-hidden w-20 h-20 md:w-full md:h-32 flex-shrink-0 md:aspect-w-2 md:aspect-h-1">
                    <img src=""
                        data-src="{$goods.image}" alt="{$goods.name}"
                        class="w-full h-full object-cover lazy-image rounded md:rounded-t-lg md:rounded-none">
                </div>

                <!-- 商品信息 -->
                <div class="p-3 flex-1 flex flex-col justify-between md:justify-start">
                    <div
                        class="text-sm font-medium text-gray-800 line-clamp-2 leading-tight md:h-10 md:leading-5 flex-1 mb-2">
                        {$goods.name}
                    </div>
                    <div class="flex items-center justify-between md:mt-2">
                        <div class="flex items-center">
                            {if !empty($goods.price)}
                            <span class="text-blue-500 font-bold price-container flex gap-1 items-center">
                                <span class="text-xs currency-symbol">{:conf('site_currency_symbol')}</span>
                                <span class="md:text-lg text-base price-number">{$goods.price}</span>
                            </span>
                            {else}
                            <span class="text-green-500 font-bold text-base">免费</span>
                            {/if}
                        </div>
                        <div class="flex items-center space-x-1">
                            <span class="text-xs text-gray-500">
                                <i class="fas fa-eye mr-1"></i><span class="view-count"
                                    data-count="{$goods.views|default=0}">{$goods.views|default=0|format_view_count}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        {/volist}
    </div>

    <!-- 加载更多状态 -->
    <div id="loading-more" class="hidden text-center py-8">
        <div class="inline-flex items-center px-4 py-2  rounded-sm text-gray-500">
            <i class="fas fa-spinner fa-spin mr-2"></i>
            正在加载更多...
        </div>
    </div>

    <div id="no-more-data" class="hidden text-center py-8">
        <div class="inline-flex items-center px-4 py-2  rounded-sm text-gray-500">
            <i class="fas fa-check-circle mr-2"></i>
            已加载全部商品
        </div>
    </div>

    {elseif $current_tag}
    <!-- 无商品提示 -->
    <div class="text-center py-20">
        <div class="text-gray-500">
            <i class="fas fa-tag text-6xl mb-6"></i>
            <h3 class="text-xl font-medium mb-2">暂无商品</h3>
            <p>该标签下还没有商品，请稍后再来看看</p>
        </div>
    </div>
    {else}
    <!-- 选择标签提示 -->
    <div class="text-center py-20">
        <div class="text-gray-500">
            <i class="fas fa-tags text-6xl mb-6"></i>
            <h3 class="text-xl font-medium mb-2">选择标签</h3>
            <p>点击上方标签查看相关商品</p>
        </div>
    </div>
    {/if}
</div>
{/block}

{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/goods/tag.js?v={$static_version}"></script>

<!-- 页面初始化 -->
<script>
    $(document).ready(function () {
        // 初始化标签页面
        if (typeof TagPage !== 'undefined') {
            const currentPage = {$current_page|default=1};
            const totalPages = Math.ceil({$total|default=0} / {$per_page|default=20});
            TagPage.init(currentPage, totalPages);
        }
    });
</script>
{/block}